<template>
  <div class="bar-chart-19 chart" ref="barChart19"></div>
</template>

<script setup>
import { ref, onMounted, inject } from "vue";
const barChart19 = ref(null);
const echarts = inject("$echarts");

const xAxisData = ['姑苏区', '高新区', '吴中区', '相城区', '吴江区', '常熟市', '张家港市', '昆山市', '太仓市', '工业园区']
const seriesData = [21016, 17230, 18790, 17570, 26470, 17860, 19526, 15710, 16507, 18260]

const option = {
  compCode: "C202309029",
  backgroundColor: "#00265f",
  tooltip: {
    trigger: 'axis',
    backgroundColor: '#053962', // 设置背景色为半透明红色
    borderColor: '#165e9e', // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: '#fff'
    },
    axisPointer: {
      type: 'shadow'
    },
    formatter: params => {
      let returnData = ''
      for (let i = 0; i < params.length; i++) {
        returnData = '<p style="font-size: 16px">' + params[i].name + '：<span style="padding-left:13px">' + params[i].value + '个</span></p>'
      }
      return returnData
    }
  },
  grid: {
    show: false,
    top: '15%',
    right: '3%',
    left: '10%',
    bottom: '12%'
  },
  xAxis: [
    {
      type: 'category',
      data: xAxisData,
      axisLine: {
        show: false,
        lineStyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      },
      axisLabel: {
        margin: 14,
        color: '#e2e9ff',
        textStyle: {
          fontSize: 14
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisTick: {
        show: false
      },
      axisLabel: {
        formatter: '{value}',
        color: '#e2e9ff',
        textStyle: {
          fontSize: 16
        }
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: 'rgba(255,255,255,1)'
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      }
    }
  ],
  series: [
    {
      type: 'bar',
      data: seriesData,
      barWidth: 14,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(0,244,255,1)' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(0,77,167,1)' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [30, 30, 30, 30],
          shadowColor: 'rgba(0,160,221,1)',
          shadowBlur: 4
        },
        emphasis: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(0,244,255,1)' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(0,77,167,1)' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [30, 30, 30, 30],
          shadowColor: 'rgba(0,160,221,1)',
          shadowBlur: 4
        }
      },
      label: {
        normal: {
          show: true,
          lineHeight: 30,
          width: 80,
          height: 30,
          // backgroundColor: 'rgba(0,160,221,0.1)',
          borderRadius: 200,
          position: ['-8', '-60'],
          distance: 1,
          formatter: ['{d|●}', '{a|{c}}'].join(''),
          rich: {
            d: {
              color: '#3CDDCF'
            },
            a: {
              color: '#fff',
              align: 'center',
              fontSize: 16
            }
          }
        }
      }
    }
  ],
  animationDuration: 2000,
  animationEasing: 'cubicInOut'
}

onMounted(() => {
  const chart = echarts.init(barChart19.value);
  chart.setOption(option);
});
</script>

<style scoped></style>
